<template>
    <div>
        <div v-for="seckill in SeckillTable" :key="seckill" style="padding-left:400px;padding-right:400px;padding-top:50px;background-color:#E4E7ED">
            <div>

                <div class="grid-content bg-purple" style="background-color:white;border-radius: 16px">
                    
                    <el-row :gutter="20">
                        <router-link :to="'/seckilldetail?category='+seckill.category+'&id='+seckill.product_id+'&price='+seckill.price+'&product_nums='+seckill.product_nums+'&start='+seckill.start+'&seckill_id='+seckill.id" style="color:black">
                            <el-col :span="9">
                                <div class="grid-content bg-purple">
                                    <img :src="require('@/assets/'+seckill.category+'/'+seckill.product_id+'/1.jpg')" style="width: 250px; height: 250px"><br>
                                </div>
                            </el-col>
                            <el-col :span="15">
                                <div class="grid-content bg-purple">
                                    <p style="width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;padding-top:10px"><b>{{seckill.shopname}}</b></p>
                                    <el-row :gutter="20" style="padding-top:20px">
                                        <!--el-col :span="14">
                                            <el-col :span="10" style="padding-left:10px"><p>秒杀价格：</p></el-col>
                                            <el-col :span="2"><p style="color:#D69C1F">￥{{seckill.price}}</p></el-col>
                                        </el-col-->
                                        <el-col :span="14">
                                            <p style="float:left">秒杀价格：</p>
                                            <p style="color:#D69C1F;float:left">￥{{seckill.price}}</p>
                                        </el-col>
                                        <el-col :span="8"><div class="grid-content bg-purple"><p style="padding-left:10px">库存数量：{{seckill.product_nums}}</p></div></el-col>
                                    </el-row>
                                    <p style="padding-top:70px">开始时间： {{seckill.start}}</p>
                                    <p style="padding-top:20px">结束时间： {{seckill.end}}</p>
                                </div>
                            </el-col>
                        </router-link>
                    </el-row>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'seckill_index',
    data() { return {
        SeckillTable: [],
        currentTime: this.$moment().format('YYYY-MM-DD HH:mm:ss')
    }},
    mounted(){
        if (this.$cookies.get("username") == null){
            alert("请登录");
            this.$router.push("/login")
        }else{
            this.$axios.get("/api/getAllSeckill?nowtime="+this.currentTime).then(res=>{
                this.SeckillTable = res.data;
                console.log(this.SeckillTable);
            });
        }
    }
}
</script>